<template>
  <div>
    <div class="m-anthor">
      <t-anchor
        :staticItems="anchorList"
        position="top"
        type="shadow"
        bottomType="cicle"
        :isFixed="true"
        :scrollOffset="50"
        :visible="true"
        tabIndex="-1"
        activeColor="default"
      ></t-anchor>

      <t-anchor
        :staticItems="anchorList"
        position="right"
        type="bordered"
        bottomType="cicle"
        :isFixed="true"
        stickyTop="60px"
        :scrollOffset="50"
        :visible="true"
        tabIndex="-1"
        activeColor="default"
        @change="e => console.log(e)"
      ></t-anchor>

      <t-anchor
        :staticItems="anchorList"
        position="right"
        type="bordered"
        bottomType="square"
        stickyTop="2"
        :isFixed="true"
        :scrollOffset="50"
        :visible="true"
        tabIndex="1"
        activeColor="default"
        style="top: 250px; left: 210px"
      ></t-anchor>
    </div>

    <div class="g-cnt">
      <div class="m-btns">
        <div class="btn">删除第二个</div>
        <div class="btn">改变第二个的名字</div>
        <div class="btn">改变第二个的名字</div>
      </div>
      <div class="m-list" ref="list1">1</div>
      <div class="m-list" ref="list2">2</div>
      <div class="m-list" ref="list3">3</div>
      <div class="m-list" ref="list4">4</div>
      <div class="m-list" ref="list5">5</div>
    </div>
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, reactive, ref } from 'vue';

const list1 = ref(null);
const list2 = ref(null);
const list3 = ref(null);
const list4 = ref(null);
const list5 = ref(null);

let anchorList = ref([]);

// const anchorList = computed(() => [
//   { label: '锚点1', widget: list1.value },
//   { label: '锚点锚点锚点锚点2', widget: list2.value },
//   { label: '锚点3', widget: list3.value },
//   { label: '锚点4', widget: list4.value },
//   { label: '锚点5', widget: list5.value },
// ]);

let page = ref(null);

onMounted(async () => {
  await nextTick();
  anchorList.value = [
    { label: '锚点1', widget: list1.value },
    { label: '锚点锚点锚点锚点发点发', widget: list2.value },
    { label: '锚点锚点锚点锚点发', widget: list3.value },
    { label: '锚点4', widget: list4.value },
    { label: '锚点5', widget: list5.value },
  ];
  console.log('anchorList.value ', anchorList.value);
  // page.value = document.querySelector('.content._content_p0zap_11');
});
</script>

<style lang="scss" scoped>
.g-cnt {
  padding: 0 150px;
}

.m-list {
  margin-top: 50px;
  height: 800px;
  background-color: #000;
  color: #fff;
  text-align: center;
  font-size: 100px;
}
</style>
